<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品</title>
    <script src="js/vue.js"></script>   <!--引入vue.js文件-->
    <script src="element-ui/lib/index.js"></script>   <!--引入组件库-->
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">  <!--引入样式库-->
    <script src="js/axios-0.18.0.js"></script>
    <style>
        .bottom {
            margin-top: 13px;
            line-height: 12px;
        }
        .image {
            width: 100px;
            height: 100px;
            display: block;
        }

        .clearfix:before,
        .clearfix:after {
            display: table;
            content: "";
        }

        .clearfix:after {
            clear: both
        }
        .nth{
            border-style:solid;
            border-color:#e4e4e4;
            border-width: 0.1px;
        }
        .flex1{
            display: flex;
            flex-wrap: wrap;
        }
        .p_no_margin{
            /*换行*/
            white-space: pre-wrap;
            margin: 0 0 5px 0;
            /*长单词折行*/
            word-wrap: break-word;
        }
        .title{
            color: #3a8ee6;
            text-decoration: none;
        }
        .title:hover{
            color: orange;
            text-decoration: underline;
            cursor: pointer;
        }
        .center{
            display: flex;
            justify-content: center;
        }
        .information{
            margin-top: 20px;
        }
        .message-container {
            display: flex;
            flex-direction: column;
            align-items: flex-end; /* 确保消息气泡靠右对齐 */
            max-width: 70%; /* 消息气泡的最大宽度 */
            margin: 10px;
        }

        .message-container-send {
            display: flex;
            flex-direction: column;
            align-items: flex-start; /* 确保消息气泡靠左对齐 */
            max-width: 70%; /* 消息气泡的最大宽度 */
            margin: 10px 10px 0 0;
            position: relative;
            top: 15px;
        }

        .message-bubble {
            position: relative;
            padding: 10px;
            margin-bottom: 10px;
            border-radius: 8px; /* 圆角边框 */
            background-color: #dcf8c6; /* 消息气泡的背景色 */
            line-height: 1.4;
            max-width: 100%;
            word-wrap: break-word; /* 允许长单词折行 */
        }

        /* 发送的消息气泡样式 */
        .sent {
            background-color: #00a699; /* 发送消息的颜色 */
            color: white; /* 文字颜色 */
            margin-left: auto; /* 消息气泡靠右 */
        }

        /* 接收的消息气泡样式，可以根据需要添加 */
        .received {
            background-color: #e6e6e6; /* 接收消息的颜色 */
            margin-right: auto; /* 消息气泡靠左 */
        }

        .qq-input-container {
            position: relative;
            max-width: 600px;
            margin: auto;
        }

        #qqMessageInput {
            width: 100%;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
            resize: none;
            margin-bottom: 5px;
        }

        .emoji-picker-container {
            position: relative;
            display: inline-block;
        }

        #emojiPickerButton {
            cursor: pointer;
            background: none;
            border: none;
            outline: none;
            font-size: 24px;
            vertical-align: middle;
        }

        /*.emoji-picker {*/
        /*    position: absolute;*/
        /*    bottom: 30px; !* 根据按钮位置调整 *!*/
        /*    left: 0;*/
        /*    width: 300px; !* 根据需要调整 *!*/
        /*    border: 1px solid #ccc;*/
        /*    border-radius: 4px;*/
        /*    background-color: white;*/
        /*    padding: 10px;*/
        /*    display: none;*/
        /*    z-index: 1000;*/
        /*}*/

        .emoji-category {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            width: 200px;
        }

        .emoji {
            width: 24px;
            height: 24px;
            cursor: pointer;
            margin: 5px;
        }

        .modal {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: white;
            padding: 20px;
            border: 1px solid #ccc;
        }

        .image-container {
            display: flex;
            flex-wrap: wrap;
        }

        .image-container img {
            margin: 5px;
            cursor: pointer;
        }
        .centera{
            text-decoration: none;
            color: black;
        }
        .centera:hover{
            color: orange;
            text-decoration: orange;
            cursor: pointer;
        }
        .auto{
            margin-left: auto;
        }

        /* flex布局，让内容垂直和水平居中，超过的部分换行显示 */
        .container {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
        }
        /* 按钮的基本样式 */
        .container p {
            position: relative;
            padding: 4px 12px;
            margin: 0 20px;
            border: 2px solid #0f0;
            font-size: 18px;
            font-weight: 600;
            text-decoration: none;
            letter-spacing: 5px;
            color: black;
            filter: hue-rotate(calc(var(--x) * 60deg));
            transition: 0.5s;
        }
        /* 鼠标经过时改变按钮样式 */
        .container p:hover {
            transition-delay: 1.5s;
            color: #000;
            box-shadow: 0 0 10px #0f0,
            0 0 20px #0f0,
            0 0 40px #0f0,
            0 0 80px #0f0,
            0 0 160px #0f0,
            0 0 320px #0f0;
        }
        p span {
            position: relative;
            z-index: 10;
        }
        /* 通过伪元素::before实现按钮左边的线 */
        .container p::before {
            content: "";
            position: absolute;
            left: -20px;
            top: 50%;
            transform: translateY(-50%);
            background: #0f0;
            width: 20px;
            height: 2px;
            box-shadow: 5px -8px 0 #0f0,
            5px 8px 0 #0f0;
            transition: width 0.5s, height 0.5s, left 0.5s,
            box-shadow 0.5s;
            transition-delay: 0s, 1s, 0s, 0.5s;
        }
        /* 鼠标经过时改变线条的样式 */
        .container p:hover::before {
            width: 60%;
            height: 100%;
            left: -2px;
            box-shadow: 0 0 0 #0f0,
            0 0 0 #0f0;
        }
        /* 通过伪元素::after实现按钮右边的线 */
        .container p::after {
            content: "";
            position: absolute;
            right: -20px;
            top: 50%;
            transform: translateY(-50%);
            background: #0f0;
            width: 20px;
            height: 2px;
            box-shadow: -5px -8px 0 #0f0,
            -5px 8px 0 #0f0;
            transition: width 0.5s, height 0.5s, right 0.5s,
            box-shadow 0.5s;
            transition-delay: 0s, 1s, 0s, 0.5s;
        }
        /* 鼠标经过时改变线条的样式 */
        .container p:hover::after {
            width: 60%;
            height: 100%;
            right: -2px;
            box-shadow: 0 0 0 #0f0,
            0 0 0 #0f0;
            cursor: pointer;
        }

        .box{
            transition: all 500ms linear;
        }
        .box:hover{
            transform: scale(1.2);
            transition: all 500ms linear;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="nth">
        <div class="flex1">
            <div class="flex1">
                <i class="el-icon-eleme" style="margin-top: 12px;font-size: 28px"></i>
                <p style="font-weight: bold">热门论坛</p>
            </div>
            <div>

            </div>
        </div>
        <el-row>
            <el-col :span="6" v-for="(bar, index) in bars" :key="bar.bid" class="box"  >
                <el-card :body-style="{ padding: '0px' }">
                    <div style="display: flex" @click="goToLogin(0,bar.bid,0,bar.uid)">
                        <div >
                            <img :src="bar.bimage" class="image">
                        </div>
                        <div style="padding: 14px;">
                            <span @click="goToLogin(0,bar.bid,0,bar.uid)" class="centera">{{ bar.bname }}</span>
                            <div class="bottom clearfix" >
                                <p class="p_no_margin" >关注量:{{bar.fc}}</p>
                                <p class="p_no_margin" >帖子数:{{bar.pc}}</p>
                            </div>
                        </div>
                    </div>
                </el-card>
            </el-col>
        </el-row>
        <!--        分页   -->
        <div style="display: flex; justify-content: center;">
            <el-pagination
                    :background="true"
                    layout="prev, pager, next"
                    :total="totalData.length"
                    :page-size="pageSize"
                    @current-change="Page"
            >
            </el-pagination>
        </div>
    </div>
    <div class="action flex1">
        <p class="p_no_margin centera" style="font-weight: bold" @click="hotPost"> 热门动态</p>
        <p class="p_no_margin centera" style="font-weight: bold" @click="nowPost"> 最新发帖</p>
    </div>

    <div class="flex1 nth" style="margin-top: 5px">
        <div>
            <el-row :gutter="20" type="flex"  justify="space-between">
                <el-col :span="18" style="min-width: 800px;max-width: 810px" ><div class="infinite-list-wrapper" style="overflow:auto">
                    <div class="grid-content bg-purple nth" style="padding: 10px" v-for="(post,index) in PostList" :key="post.pid">
                    <div>
                        <p class="p_no_margin centera" @click="goToLogin(0,post.bid,0,post.uid)">{{post.bname}}</p>
                        <p class="title"  @click="goToLogin(0,post.bid,post.pid,0)">{{post.title}}</p>
                        <p class="p_no_margin" >{{post.content}}</p>
                        <div class="flex1" style="max-width: 660px">
                            <!-- 遍历每个帖子的图片数组 -->
                            <div class="flex1 " v-for="(image, imgIndex) in post.images" style="margin: 10px">
                                <div v-if="image.type == 'images'" style="height: 120px;width: 120px">
                                    <img  :key="imgIndex" :src="image.src" @click="showImage(image)" height="120px" width="120px"/>
                                </div>
                                <div v-else-if="image.type == 'video'" style="height: 200px;width: 300px">
                                    <video controls height="200px" width="300px">
                                        <source :src="image.src">
                                    </video>
                                </div>
                                <div v-else-if="image.type == 'music'" style="display: flex;flex-direction: column;justify-content: flex-end;margin-bottom:20px;height: 160px;width: 300px">
                                    <audio controls >
                                        <source :src="image.src" >
                                    </audio>
                                </div>
                            </div>

                            <div v-if="showModal" class="modal" @click="closeModal">
                                <div style="display: flex;justify-content: flex-end">
                                    <button @click="closeModal" style="background-color: red;color: whitesmoke;">关闭</button>
                                </div>
                                <img :src="currentImage" width="400px" height="100%"/>
                            </div>
                        </div>

                    </div>
                    <div class="flex1" style="margin-top: 6px;margin-bottom: 16px">
                        <div class="flex1">
                            <i class="el-icon-user" style="font-size: 21px"></i>&nbsp;
                            <p class="title" style="font-size: 13px;margin: 2px 10px 5px 0;color: black" @click="goToLogin(0,0,0,post.uid)">{{post.name}}</p>
                        </div>
                        <div class="flex1">
                            <i class="el-icon-date" style="font-size: 21px"></i> &nbsp;
                            <p class="p_no_margin" style="font-size: 13px;margin: 2px 0 5px 0">{{post.tdate}}</p>
                        </div>
                        <!-- 容器 -->
                        <div class="container" style="margin-left: 40px">
                            <p  style="--x:1;cursor: pointer" @click="likes(1,post.uid,post.pid,post.bid)"><span>点赞{{post.ac}}</span></p>
                            <p  style="--x:2;cursor: pointer" @click="likes(2,post.uid,post.pid,post.bid)"><span>投币{{post.bc}}</span></p>
                            <p  style="--x:3;cursor: pointer" @click="likes(3,post.uid,post.pid,post.bid)"><span>转发{{post.fc}}</span></p>
                        </div>

                    </div>
                    <div v-if="post.isCheck">
                        <span class="title " @click="Check(index,post.pid)">查看评论</span>
                    </div>
                    <div v-else style="background-color: #E4E7ED;padding: 10px">
                        <span class="title " @click="Check2(index)">收起评论</span>
                        <div style="margin-top: 10px" v-for="(list,index) in DiscussList" :key="index">
                            <div v-if="list.name != TheUser.name" class="flex1">
                                <img :src="list.image" height="50px" width="50px" style="border-radius: 50px"/>
                                <div>
                                    <p class="p_no_margin">{{list.name}}</p>
                                    <p class="p_no_margin" style="color: #8c939d;font-size: 12px">{{list.cdate}}</p>
                                </div>
                                <div class="message-container">
                                    <div class="message-bubble received">
                                        <p class="p_no_margin">{{list.text}}</p>
                                    </div>
                                </div>
                            </div>
                            <div v-else class="flex1" style="flex-direction: row-reverse;align-items: flex-end;margin-bottom: 10px" >


                                <img :src="list.image" height="50px" width="50px" style="border-radius: 50px"/>
                                <div>
                                    <p class="p_no_margin" style="   text-align: right;">{{list.name}}</p>
                                    <p class="p_no_margin" style="color: #8c939d;font-size: 12px">{{list.cdate}}</p>
                                </div>
                                <div class="message-container-send">
                                    <div class="message-bubble send">
                                        <p class="p_no_margin">{{list.text}}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="qq-input-container">
                            <textarea
                                    id="qqMessageInput"
                                    v-model="message"
                                    placeholder="输入消息..."
                                    @focus="handleFocus"
                                    @blur="handleBlur"
                            ></textarea>
                            <div class="flex1" style="justify-content: space-around">
                                <div class="emoji-picker-container">
                                    <button
                                            id="emojiPickerButton"
                                            title="选择表情包"
                                            :class="{ active: isEmojiPickerVisible }"
                                            @click="toggleEmojiPicker"
                                    >
                                        &#x1F600;
                                    </button>
                                    <div
                                            class="emoji-picker"
                                            v-show="isEmojiPickerVisible"
                                    >
                                        <!-- 这里使用v-for来循环渲染表情包 -->
                                        <div
                                                class="emoji-category"
                                                v-for="(category, index) in emojiCategories"
                                                :key="index"
                                        >
                                            <img
                                                    v-for="emoji in category.emojis"
                                                    :key="emoji.src"
                                                    class="emoji"
                                                    :src="emoji.src"
                                                    :data-emoji="emoji.dataEmoji"
                                                    @click="insertEmoji(emoji.dataEmoji)"
                                            />
                                        </div>
                                    </div>
                                </div>
                                <div>
                                    <el-button plain icon="el-icon-edit" @click="submit(post.pid)">发布</el-button>
                                </div>
                            </div>
                        </div>

                    </div>


                    </div>
                    <p v-if="loading">加载中...</p>
                    <p v-if="noMore">没有更多了</p>
                </div></el-col>
                <el-col :span="6">
                    <div class="grid-content bg-purple" style="padding-left: 27px">
                        <div v-if="Object.keys(TheUser).length > 0" class="information" >
                            <img :src="TheUser.image" height="100px" width="100px" @click.prevent="goToLogin(1,0,0,0)" class="box"/>
                            <div class="center">
                                <p class="p_no_margin">{{ TheUser.name }}</p>
                            </div>
                            <div class="center">
                                <p class="p_no_margin">经验: {{ TheUser.experience }}</p>
                            </div>
                            <div class="center">
                                <p class="p_no_margin">金币: {{ TheUser.coins }}</p>
                            </div>
                            <div class="center">
                                <el-popover
                                        placement="top"
                                        width="300px"
                                        v-model="czVisible">
                                    <h2 style="color: #409EFF;margin: 2px;display: flex;justify-content: center">1:10的金币充值</h2>
                                    <div>
                                        <el-button type="info" plain  v-for="amount in rechargeAmounts" :key="amount" @click="selectAmount(amount)">{{ amount }} 元</el-button>
                                    </div>
                                    <div style="margin: 10px 0">
                                        <el-input  placeholder="自定义金额" v-model="customAmount"></el-input>
                                    </div>
                                    <div style="text-align: right; margin: 0">
                                        <el-button size="mini" type="text" @click="czVisible = false">取消</el-button>
                                        <el-button type="primary" size="mini" @click="submit2()">确定</el-button>
                                    </div>
                                    <el-button slot="reference">前往充值</el-button>
                                </el-popover>
                            </div>
                            <div class="center">
                                <a class="p_no_margin centera"  href="#"  @click.prevent="goToLogin(1,0,0,0)">个人中心</a>
                            </div>
                        </div>
                        <div v-else class="information" style="margin-top: 30px">
                            <div class="center">
                                <a class="p_no_margin" href="#"  @click.prevent="goToLogin(2,0,0,0)">请前往登录</a>
                            </div>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>

    </div>

</div>

<script>
    new Vue({
        el:'#app',
        mounted() {
            this.findAll(); // 在组件挂载时调用 findAll 方法

        },

        data: {
            name:'',
            password:'',
            TheUser:{},
            isLogin:false,
            // 定义组件的数据属性
            bars:[],
            totalData: [], //分好类的数据直接扔进去  后面分页使用
            // 初始页码
            currentPage: 1,
            // 每页显示的条目数
            pageSize: 8,
            //查看评论
            //输入框 发布评论的
            message: '',
            isEmojiPickerVisible: false,
            emojiCategories: [
                {
                    name: 'People',
                    emojis: [
                        { src: 'emojis/emoji1.png', dataEmoji: '😄' },
                        { src: 'emojis/emoji2.png', dataEmoji: '😂' },
                        { src: 'emojis/emoji3.png', dataEmoji: '🤣' },
                        { src: 'emojis/emoji4.png', dataEmoji: '😅' },
                        { src: 'emojis/emoji5.png', dataEmoji: '😆' },
                        { src: 'emojis/emoji6.png', dataEmoji: '😉' },
                        { src: 'emojis/emoji7.png', dataEmoji: '😊' },
                        { src: 'emojis/emoji8.png', dataEmoji: '😋' },
                        { src: 'emojis/emoji9.png', dataEmoji: '😎' },
                        { src: 'emojis/emoji10.png', dataEmoji: '😍' },
                        { src: 'emojis/emoji11.png', dataEmoji: '😘' },
                        { src: 'emojis/emoji12.png', dataEmoji: '😤' },
                        { src: 'emojis/emoji13.png', dataEmoji: '😢' },
                        { src: 'emojis/emoji14.png', dataEmoji: '😭' },
                        { src: 'emojis/emoji15.png', dataEmoji: '😬' },
                        { src: 'emojis/emoji16.png', dataEmoji: '😰' },
                        { src: 'emojis/emoji17.png', dataEmoji: '😱' },
                        { src: 'emojis/emoji18.png', dataEmoji: '😳' },
                        { src: 'emojis/emoji19.png', dataEmoji: '😵' },
                        { src: 'emojis/emoji20.png', dataEmoji: '🤡' },
                    ],
                },
                // 可以添加更多分类...
            ],
            images: [],
            showModal: false,
            currentImage: 0,

            //论坛的 帖子的 基本信息
            PostList:[],
            //评论者的基本信息
            DiscussList:[],
            //提交回复之后  立即进行消息的添加
            addDiscuss:{},
            //缓存加载
            count: 10,
            loading: false,
            //这个是充值
            rechargeAmounts: [1, 10, 50, 100, 300,500],
            customAmount: null,
            orderId: '2323723421',
            czVisible: false,
            //点赞转发投币


        },
        methods: {
            //find所有的论坛
            findAll() {
                // 发送 GET 请求到 "products/findAll" 路径
                axios.get("/bars/getAllBars").then(res => {
                    // 将响应中的数据分别赋值给对应的属性
                    this.bars = res.data; // 将整个响应数据赋值给 products 属性
                    this.totalData = this.bars
                    if (this.bars.length <=8 ){
                        this.pageSize = this.bars.length;
                    }else {

                    }
                    this.findAllPosts();
                }).catch(error => {
                    // 处理请求错误
                    console.error('Error fetching data:', error);
                });
                this.findUser();
            },
            //找寻对应的用户所有信息
            findUser(){
                // 在index.html页面加载时读取
                this.name = getCookie("name");
                this.password = getCookie("password");

                if (this.name && this.name.trim() !== "" && this.password && this.password.trim() !== "") {
                    this.isLogin = true;
                } else {
                    this.isLogin = false;
                }
                // 辅助函数，用于获取cookie的值
                function getCookie(name) {
                    let cookieArr = document.cookie.split(";");
                    for(let i = 0; i < cookieArr.length; i++) {
                        let cookiePair = cookieArr[i].trim().split("=");
                        if (cookiePair[0] === name) {
                            return cookiePair[1];
                        }
                    }
                    return "";
                }
                axios.get("users/findByName_pwd",{params:{name : this.name,password:this.password}}).then(x=>{
                    this.TheUser = x.data;
                })
            },
            hotPost(){
                this.findAllPosts();
                console.log("hot")
            },
            nowPost(){
                this.PostList.sort((a, b) => {
                    // 将字符串类型的日期转换为 Date 对象进行比较
                    const dateA = new Date(a.tdate);
                    const dateB = new Date(b.tdate);

                    // 比较日期，最新的排在前面
                    return dateB - dateA;
                });
                console.log("now"+this.PostList.tdate)
            },
            //找到所有的帖子以及对应的所有的信息
            findAllPosts() {
                axios.get("posts/getAll").then(response => {
                    this.PostList = response.data;

                    // 遍历每个帖子以处理其中的图片字符串
                    for (let i = 0; i < this.PostList.length; i++) {
                        //用于评论显示的  收起和查看评论
                        // 为每个帖子添加 isCheck 属性
                        this.$set(this.PostList[i], 'isCheck', true);
                        // console.log("new"+this.PostList)
                        const arr = this.PostList[i].images;
                        if (arr != null) {
                            // 使用 split 方法来拆分字符串
                            const arrList = arr.split(';');
                            // 更新 PostList 中的 images 属性
                            this.PostList[i].images = arrList.map(a => {
                                if (a.includes('images')) {
                                    return { src: a, type: 'images' };
                                } else if (a.includes('music')) {
                                    return { src: a, type: 'music' };
                                } else if (a.includes('video')) {
                                    return { src: a, type: 'video' };
                                } else {
                                    return { src: a }; // 默认情况，如果都不包含任何特定关键词
                                }
                            });
                        } else {
                            // 如果 arr 不是字符串或为 null，设置 images 为空数组
                            this.PostList[i].images = [];
                        }
                    }

                    // 合并所有帖子中的 images 到一个数组中
                    this.images = this.PostList.reduce((acc, post) => {
                        if (Array.isArray(post.images) && post.images.length > 0) {
                            acc.push(...post.images);
                        }
                        return acc;
                    }, []);

                    // console.log(this.images);  // 打印合并后的 images 数组
                }).catch(error => {
                    console.error("Error fetching posts:", error);
                });
            },
            //查询到帖子下面的评论区
            findAllDiscuss(pid){
                axios.get("posts/getDiscuss",{params:{pid:pid}}).then(x=>{
                    this.DiscussList = x.data;
                })
            },
            // 处理页码变化的事件
            Page(newPage) {
                this.currentPage = newPage;
                // 更新 tableData 以反映当前页的数据
                this.bars = this.currentTableData;
            },
            Check(index,pid){
                //首先遍历所有 的帖子  设置为true  也就是处于待查看状态
                this.PostList.forEach(post=>{
                    this.$set(post,'isCheck',true);
                });
                //让点击查看后  状态切换
                this.$set(this.PostList[index], 'isCheck', !this.PostList[index].isCheck);

                //如果状态值为false  之后执行查询人物的方法
                if(this.PostList[index].isCheck){

                }else {
                    this.findAllDiscuss(pid);
                }
            },
            Check2(index){
                //让点击查看后  状态切换
                this.$set(this.PostList[index], 'isCheck', !this.PostList[index].isCheck);
            },

            toggleEmojiPicker() {
                this.isEmojiPickerVisible = !this.isEmojiPickerVisible;
            },
            insertEmoji(emoji) {
                this.message += emoji;
                this.isEmojiPickerVisible = false;
            },
            handleFocus() {
                // 当输入框获得焦点时可以执行的操作
            },
            handleBlur() {
                // 当输入框失去焦点时可以执行的操作
            },
            showImage(image) {
                this.showModal = true;
                this.currentImage = image.src;
                console.log("showModal" + this.showModal +"currentImage" + this.currentImage)
            },
            closeModal() {
                this.showModal = false;
            },

            //提交评论
            submit(pid){
                if (this.name && this.password ){
                    axios.get("posts/addDiscuss",{params:{uid:this.TheUser.uid,text:this.message,pid:pid}}).then(x=>{
                        this.$message({
                            message: '成功发布',
                            type: 'success'
                        });
                        this.findAllDiscuss(pid);
                    })
                }else{
                    this.$message({
                        message: '请前往登录',
                        type: 'warning'
                    });
                }
                if ( !this.message ){
                    this.$message({
                        message: '请写出的想法',
                        type: 'warning'
                    });
                }

            },
            //最外层跳转到登录界面   个人中心、登录、论坛、个人、帖子
            goToLogin(index,bid,tid,uid) {
                if (index == 1){
                    window.top.location.href = `center.html`;
                }
                if (index == 2){
                    window.top.location.href = 'log_in.html';
                }
                if (bid && uid){
                    console.log(bid)
                    window.top.location.href = `bardetail.html?b=${bid}&u=${uid}`
                }
                if (tid && bid){
                    console.log(tid)
                    window.top.location.href = `postdetail.html?bid=${bid}&pid=${tid}`
                }
                if (uid && !bid && !tid && !index){
                    console.log(uid)
                    window.top.location.href = `userdetail.html?uid=${uid}`
                }
            },
            load () {
                this.loading = true
                setTimeout(() => {
                    this.count += 2
                    this.loading = false
                }, 2000)
            },
            //充值的功能
            selectAmount(amount) {
                this.customAmount = amount; // Reset custom amount when a predefined amount is selected
            },
            submit2() {
                if(this.customAmount == null){
                    this.$message({
                        message: '请输入金额',
                        type: 'warning'
                    });
                }else{
                    let cost = this.customAmount ? this.customAmount : 0; // Use custom amount if provided
                    this.czVisible = false;
                    axios.get("/users/pay", { params: {uid:this.TheUser.uid, cost: cost}})
                        .then(response => {
                            // 根据后端返回的数据进行相应的处理，比如跳转到支付页面
                            window.top.location.href = `http://localhost:9527/users/pay?uid=${this.TheUser.uid}&cost=${cost}`;
                        })
                        .catch(error => {
                            console.error('支付失败:', error);
                            // 处理支付失败的情况，可以提示用户或者进行其他操作
                        });
                }
            },
            //点赞功能
            likes(name,otherid,pid,bid){
                if (this.isLogin){
                    if (name == 1){
                        axios.get("users/likes",{params:{uid:this.TheUser.uid,pid:pid,likes:1,shares:0,coins:0,otherid:otherid}}).then(x=>{
                            if (x.data =='ok'){
                                this.$message({
                                    message: '点赞成功',
                                    type: 'success'
                                });
                            }
                            if (x.data == 'ac'){
                                this.$message({
                                    message: '已经点过赞了',
                                    type: 'warning'
                                });
                            }
                        })
                    }else if(name == 2){
                        axios.get("users/likes",{params:{uid:this.TheUser.uid,pid:pid,likes:0,shares:0,coins:1,otherid:otherid}}).then(x=>{
                            if (x.data =='ok'){
                                this.$message({
                                    message: '投币成功',
                                    type: 'success'
                                });
                            }
                            if (x.data == 'bc'){
                                this.$message({
                                    message: '最多投两个币',
                                    type: 'warning'
                                });
                            }
                        })
                    }else if(name == 3){
                        axios.get("users/likes",{params:{uid:this.TheUser.uid,pid:pid,likes:0,shares:1,coins:0,otherid:otherid}}).then(x=>{
                            if (x.data == 'ok' || x.data =='fc'){
                                // 获取当前页面的URL
                                var currentPageUrl = window.location.hostname+`:`+window.location.port+`/postdetail.html?bid=${bid}&pid=${pid}`

                                // 使用剪贴板API复制URL
                                navigator.clipboard.writeText(currentPageUrl)
                                    .then(() => {
                                        // 复制成功后的操作，可以是弹出消息或其他提示
                                        this.$message({
                                            message: '已复制链接',
                                            type: 'success'
                                        });
                                    })
                                    .catch(err => {
                                        // 复制失败的处理
                                        console.error('无法复制: ', err);
                                    });
                            }
                        })
                    }
                    this.findAllPosts();
                }else{
                    this.$message({
                        message: '请前往登录',
                        type: 'warning'
                    });
                }

            },


        },
        computed:{
            currentTableData() {
                const startIndex = (this.currentPage - 1) * this.pageSize;
                const endIndex = startIndex + this.pageSize;
                return this.totalData.slice(startIndex, endIndex);
            },
            noMore () {
                return this.count >= this.PostList.length;
            },
            disabled () {
                return this.loading || this.noMore
            },
        },
        watch: {
            // 监听 totalData 的变化，更新 tableData
            totalData: {
                immediate: true,
                handler(newVal) {
                    this.bars = this.currentTableData;
                }
            }
        },


    })
</script>
</body>
</html>